<template>
  <div style="height: 100%;overflow-y: auto;margin: 10px;padding:10px;border-radius: 5px;background: white;">
<!--      <AMap loca/>-->
<!--    <AMapInput/>-->
<!--    <AMapImg :zoom="6" modelValue="116.397428,39.90923"/>-->
    <Pages>
      <div path="default">default</div>
      <div path="a" style="color:red">
        <router-link to="#" replace><Button>aaa</Button></router-link>
      </div>
      <div path="b" style="color:red" href="./404.vue"></div>
      <div path="c">
        <Button @click="count++">Count {{count}}</Button>
      </div>
    </Pages>
    <!--    <FilePreview file-url="http://127.0.0.1:5996/sqltoy.docx"/>-->
    {{ user.age }}
    <Chart style="width:100%;height: 250px" :data="chartData"/>
    <Button @click="growsUp">test</Button>
    <LinkButtons>
      <!--    xxx-->

      <Button v-if="flag">btn1{{ flag }}</Button>
      <Button>btn2</Button>
      <Button>btn3</Button>
      <Button>btn4</Button>
    </LinkButtons>
    <Table :datas="testdata" ref="tableRef" :attrs="tdAttrs" checkbox>
      <TableItem title="a" prop="a" className="row" width="10%"/>
      <TableItem title="b" prop="b"/>
      <TableItem title="c" prop="c"/>
      <TableItem title="d" prop="d"/>
      <TableItem title="e" prop="e"/>
      <TableItem title="f" prop="f"/>
      <TableItem title="g" prop="g"/>
      <TableItem title="h" prop="h"/>
      <TableItem title="i" prop="i"/>
      <TableItem title="j" prop="j" hidden="true"/>
      <TableItem title="k" prop="k" :hidden="true"/>

      <TableItem title="control">
        <template #default>
          控制
        </template>
      </TableItem>
    </Table>

    <Dict value="M" dict="Gender" style="color:red"/>

    <Dict dict="Gender">
      <template #default="{items}">
        <div v-for="item in items">{{ item.key }}--{{ item.title }}</div>
      </template>
    </Dict>
    二维码
    <QRCode value="https://vuejs.org/" />
<!--    <QrCode :width="200"-->
<!--            :height="200"-->
<!--            image="http://127.0.0.1:5996/files/2023/0304/1/1L9N1G30DZHKZ.png?small"-->
<!--            :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'Q' }"-->
<!--            :dotsOptions="{-->
<!--            type: 'rounded'-->
<!--          }"-->
<!--            :backgroundOptions="{ color: '#ffffff' }"-->
<!--            :cornersSquareOptions="{ type: 'dot', color: '#000000' }"-->
<!--            :cornersDotOptions="{ type: undefined, color: '#000000' }"-->
<!--            :imageOptions="{ hideBackgroundDots: true, imageSize: 1, margin: 10 }"-->
<!--            value="https://scholtz.sk"></QrCode>-->
    <div style="padding: 10px">
      <!--表单字段分组-->
      <FiledGroup style="height: 300px;">
        <Form style="padding: 10px" mode="twocolumn">
          <!--信息放在Legend中时，可收起-->
          <Legend title="学生基本信息" icon="h-icon-user">
            <FormItem label="姓名" required>
              <File v-model="path" maxSize="1G"/>
              {{ path }}
            </FormItem>
            <FormItem label="用户">
              <UserInput />
            </FormItem>
            <FormItem label="姓名" required><Input value="张三"/></FormItem>
            <FormItem label="年龄"><Input value="16"/></FormItem>
            <FormItem label="性别"><Select value="F" dict="Gender"/></FormItem>
            <FormItem label="家庭住址">
              <AMapInput v-model:lngLat="lngLat"/>
            </FormItem>
            <FormItem label="经纬度" readonly>{{ lngLat }}
            </FormItem>
          </Legend>
          <Legend title="班级信息" icon="h-icon-user">
            <FormItem label="学校"><Input value="某个中学"/></FormItem>
            <FormItem label="班级"><Input value="中二（3）班"/></FormItem>
            <FormItem label="班主任"><Input value="张翠花"/></FormItem>
          </Legend>
          <Legend title="家庭情况"/>
          <FormItem label="父亲">xx</FormItem>
          <FormItem label="母亲">12</FormItem>
          <FormItem label="学校">xx</FormItem>
          <FormItem label="性别">xxx</FormItem>
        </Form>
      </FiledGroup>
      <FileInput accept=".xlsx" @change="onFile">
        <Button> 测试Excel导入</Button>
      </FileInput>
      <FileUploader v-model="files" @upload="onUploaded" dataType="string"/>
      <RichTextEditor/>
    </div>

    <!--  <AMap v-model="location"/>-->
    {{ location }}
    <Dialog href="TestDialog.vue" ref="testDlg">
      <template #footer="dlg">
        <Button @click="dlg.cancel" :disabled="dlg.loading">取消</Button>
        <Button :loading="dlg.loading" color="primary" @click="dlg.submit">确认</Button>
      </template>
    </Dialog>
    <Button @click="openDlg" @test="onTestEvent">打开对话框</Button>
    <Button ref="btn" @click="doPopup">popup</Button>
  </div>
  <!--  <AMapInput/>-->


</template>
<script setup>
import File from "./coms/File.vue";
import {ref, getCurrentInstance, provide, inject, defineComponent, defineAsyncComponent, h} from 'vue'
import xlsx from 'xlsx'
// import QrCode from 'qrcode-vue3'
import {loadComponent} from 'framework'
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
console.log("hash",route.hash)
const count=ref(0)

import {useMessage,send} from "./js/message.js";

const msg=useMessage()
msg.addListener("test",(a)=>{
  console.log("test event ",a)
})

setTimeout(()=>{
  send({type:'test',data:'hello'})
},1000)
const Pages1 = defineComponent({
  methods:{
    open(name,params={}){
      const router=useRouter()
      router.replace({
        hash:name,
        query:params
      })
    }
  },
  setup(props, context) {

    const compMap = {}
    const children = context.slots.default()
        .filter(vn => vn.props?.path).forEach(it => {
          let props=it.props
          let {href,path} = props
          delete props.href
          delete props.path
          if (href) {
            compMap['#'+path] =h(defineAsyncComponent(() => loadComponent(href)),props)
          } else {
            compMap['#'+path] = it
          }
        })
    return () => h(compMap[route.hash],Object.keys(route.query).length > 0?{params:route.query}:null)
  }
})

let uv = {name: '张三', age: 1}
var user = ref(uv)
const chartData = ref({
  datasets: [{
    label: 'First dataset',
    data: [0, 20, 40, 50]
  },
    {
      label: 'Second dataset',
      data: [10, 20, 40, 35]
    }
  ],
  labels: ['January', 'February', 'March', 'April']
})
setTimeout(() => {
  chartData.value = {
    datasets: [{
      label: 'First dataset',
      data: [0, 20, 20, 30]
    },
      {
        label: 'Second dataset',
        data: [10, 20, 20, 15]
      }
    ],
    labels: ['January', 'February', 'March', 'April']
  }
}, 3000)

function growsUp() {
  uv.age = 2
  user.value = uv
  console.log(uv == user.value)
  //var tempUser=user.value
  // user.value.age=2
  // tempUser.age=3
  // user.value=tempUser
}

import AMapInput from "./coms/AMapInput.vue";
import UserInput from './platform/UserInput.vue'
import AMapImg from "./coms/AMapImg.vue";
const btn = ref(null)
const flag = ref(true)
const that = getCurrentInstance()
setTimeout(() => {
  flag.value = false
  //that.$forceUpdate();
}, 1000)

function doPopup() {

}

const testdata = ref([
  {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 10, k: 11, l: 12, m: 12, n: 14},
  {a: 12, b: 22, c: 32}
])
const tableRef = ref(null)
window.tableRef = tableRef

function tdAttrs(data, index) {
  console.log(data, index, "aaaa")
  return {}
}

const address = ref('')
const lngLat = ref()
const files = ref(['files/2023/0315/U1/1LR42I0SQWT1Z.xlsx'])

function onUploaded(fileItem) {
  console.log(fileItem)
  console.log(files)
}

// <QrCode  :width="200"
// :height="200"
// value="https://scholtz.sk" ></QrCode>


// import AMap from "./coms/AMap.vue";
const path = ref('files/2023/0315/U1/1LR42I0SQWT1Z.xlsx')
const location = ref()
setTimeout(() => {
  location.value = "90.526869,30.917059"
}, 1000)

function onFile(file) {
  const reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = function (e) {
    const data = e.target.result;
    const excel = xlsx.read(data, {
      type: 'binary'
    });
    const result = [];
    for (let i = 0; i < excel.SheetNames.length; i++) {
      const newData = xlsx.utils.sheet_to_json(excel.Sheets[excel.SheetNames[i]]);
      result.push(...newData)
    }
    console.log(JSON.stringify(result));
    //for (var i = 0; i < result.length; i++) {
    //    console.log(JSON.stringify(result[i]));
    //}
    //这里可以写执行 post发送到服务端
  }
}

//获取默认坐标
//https://restapi.amap.com/v3/ip?key=7d1a6efe535a021e0957e835953a795f
/**
 * {
 * "status": "1",
 * "info": "OK",
 * "infocode": "10000",
 * "province": "四川省",
 * "city": "成都市",
 * "adcode": "510100",
 * "rectangle": "103.9017713,30.53006918;104.2544496,30.79041003"
 * }
 */
// require(['https://webapi.amap.com/maps?v=2.0&key=7d1a6efe535a021e0957e835953a795f'],AMap=>{
//   console.log(AMap)
// })
const testDlg = ref()

async function openDlg() {
  let ret = await testDlg.value.open("xxxx")
  console.log(ret)
}

function onTestEvent(e) {
  alert("testEvent")
}
</script>
<style>
.row {
  color: red;
}

.container > .copyright {
  display: none;
}
</style>
